<template>
	<view>
		<view class="merchant-box">
			<scroll-view class="scroll-box" scroll-y="true" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
				<view class="shop-box z-padding-t-32" v-if="shop_id">
					<view class="shop-top z-radius-20 z-margin-lr-32 z-padding-32">
						<view class="z-font-30 z-margin-b-32">商家信息</view>
						<view class="z-flex-c shop-info z-padding-24 z-radius-20">
							<image class="logo z-radius-20 z-margin-r-16" mode="aspectFill" :src="cdn(shop.logo_image)"></image>
							<view class="z-flex-1">
								<view class="z-font-26 z-margin-b-8">{{ shop.name }}</view>
								<view class="z-font-24 text_999">{{ shop.leader_name }} {{ shop.leader_mobile }}</view>
							</view>
							<view class="z-btn call z-font-22" @tap="call">联系TA</view>
						</view>
					</view>
					<view class="shop-top z-padding-32 z-margin-32 z-radius-20">
						<view class="z-font-30 z-margin-b-32">商家简介</view>
						<view class="z-font-28 text_999">{{ shop.intro }}</view>
					</view>
					<view class="z-flex-c shop-top z-padding-32 z-margin-32 z-radius-20">
						<view class="z-flex-1">
							<view class="z-font-24">{{ shop.address }}</view>
							<view class="z-font-24 text_999 z-margin-t-8">{{ shop.province }}{{ shop.province }}{{ shop.province }}</view>
						</view>
						<view class="z-flex-y-c" @tap="openLoaction">
							<image src="/static/service/shop-address.png" class="navigation"></image>
							<view class="z-font-18 text_999 z-margin-t-16">导航</view>
						</view>
					</view>
				</view>
				<block v-else-if="shop">
					<view class="bac-box z-padding-b-88">
						<view class="z-flex z-padding-t-88">
							<input type="text" class="code-box" v-model="code" placeholder="商家工号" />
						</view>

						<view class="join-btn z-text-c" v-if="state === 0">待审核</view>
						<view class="join-btn z-text-c" @tap="joined" v-else-if="state === -1">审核拒绝,重新申请</view>
						<view class="join-btn z-text-c" @tap="joined" v-else>加入</view>
					</view>

					<view class="base-box">
						<view class="z-padding-lr-32 z-padding-t-32">商家广场</view>

						<view class="merchant z-padding-24 z-margin-t-24" v-for="(item, index) in list" @tap="toDetail(item)">
							<image class="img-box" :src="cdn(item.logo_image)" mode="aspectFill"></image>
							<view class="z-margin-l-24 z-flex-1">
								<view class="merchant-title">{{ item.name }}</view>
								<view class="merchant-remark z-margin-t-24">{{ item.intro }}</view>
							</view>
						</view>
						<!-- <van-empty description="暂无商家" v-if="{{finish && list.length === 0}}" /> -->
						<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 弹出 -->
		<u-popup :round="10" :show="show" @close="onClose">
			<view class="z-padding-32">
				<view class="merchant-pop z-padding-24 z-margin-t-24">
					<image class="img-box" :src="cdn(info.logo_image)"></image>
					<view class="z-margin-l-24 z-flex-1">
						<view class="merchant-title">{{ info.name }}</view>
						<view class="merchant-remark z-margin-t-24">{{ info.intro }}</view>
					</view>
				</view>

				<view class="certain-btn z-text-c" @tap="certainJoin">确定加入</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			list: [],
			finish: false,
			loading: false,
			page: 1,
			code: '',
			state: '',
			shop: '',
			shop_id: '',
			info: ''
		};
	},
	onLoad(options) {
		this.reload();
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		toDetail(e) {
			this.util.skip('/service/recruitDetail/recruitDetail', {}, (res) => {
				res.eventChannel.emit('shopInfo', e);
			});
		},
		joined() {
			if (this.code.trim() === '') return this.util.toast('请输入商家工号');
			this.http.post('shop/getCodeShop', { code: this.code }).then((res) => {
				(this.show = true), (this.info = res.data);
			});
		},
		certainJoin() {
			this.http.post('skill/joinshop', { code: this.code, type: 1 }).then((res) => {
				this.util.toast(res.msg);
				this.show = false;
			});
		},
		reload() {
			(this.list = []), (this.page = 1), (this.finish = false);
			this.getList();
		},
		more() {
			this.page = ++this.page;
			this.getList();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true;
			this.http.get('shop/shoplist', {
				page: this.page
			})
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true;
					}
					let arr = this.list.concat(res.data);
					this.list = arr;
				})
				.finally((res) => {
					this.loading = false;
				});
		},
		getShop() {
			this.http.get('shop/shopdetail', {
				id: this.shop_id
			}).then((res) => {
				this.shop = res.data;
				uni.setNavigationBarTitle({
					title: res.data.name || '店铺信息'
				});
			});
		},
		call() {
			uni.makePhoneCall({
				phoneNumber: this.shop.leader_mobile
			});
		},
		openLoaction() {
			uni.openLocation({
				latitude: Number(this.shop.lat),
				longitude: Number(this.shop.lng),
				name: this.info.address,
				scale: 18
			});
		},
		getInfo() {
			this.http.post('skill/joinshop', {}, true).then((res) => {
				if (res.data.skill.shop_id) {
					this.shop_id = res.data.skill.shop_id;
					this.getShop();
				} else if (res.data.joinShop) {
					(this.code = res.data.joinShop.code), (this.state = res.data.joinShop.state), (this.shop = res.data.skill);
				} else {
					this.shop = res.data.skill;
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}

.merchant-box {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 100rpx);
	/* #endif */
}

.scroll-box {
	height: 100%;
	box-sizing: border-box;
}

.each-merchant {
	width: 86rpx;
	height: 100rpx;
	background: #f5f7f9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin-right: 20rpx;
}

.join-btn {
	width: 686rpx;
	height: 98rpx;
	background: #1677ff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	margin: auto;
	font-size: 30rpx;
	font-weight: bold;
	color: #ffffff;
	line-height: 98rpx;
	margin-top: 70rpx;
}

.bac-box {
	background-color: #fff;
}

.code-box {
	width: 600rpx;
	height: 80rpx;
	border-bottom: 1px solid #f5f7f9;
}

.base-box {
	width: 750rpx;
	background: #edf1f4;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	opacity: 1;
	position: relative;
	top: -50rpx;
}

.merchant {
	width: 662rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	display: flex;
	align-items: center;
}

.img-box {
	width: 154rpx;
	height: 154rpx;
	background: #d9d9d9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.merchant-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.merchant-remark {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 弹出层 */
.merchant-pop {
	width: 496rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	display: flex;
	align-items: center;
}

.certain-btn {
	width: 496rpx;
	height: 100rpx;
	background: #1677ff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	margin-top: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 100rpx;
}

.shop-box {
	height: 100vh;
	background: #fff;
}
.shop-top {
	background-color: #f5f7f9;
}

.shop-info {
	background: #fff;
}

.logo {
	width: 80rpx;
	height: 80rpx;
}

.call {
	width: 128rpx;
	height: 56rpx;
}

.navigation {
	width: 40rpx;
	height: 40rpx;
}
</style>
